<!-- fourth-input-box 第四种时间输入框 -->
<template>
  <div class="time-box">
    <div class="fourth-input-box" :class="{'border-active':border_active,'border-width100':borderLength}" @click="openPicker">
      <span class="c-name"><i class="must-entry" v-if="hKind !== '0'">*</i>{{hPlaceholder}}</span><input ref="cInput" class="c-input" :class="hValue === ''?'c-opacity':''" :type="hType" :placeholder="hPlaceholder" :value="dateTimeValue" disabled>
      <span class="financial-reimbursement-jiantou8 financial-reimbursement-iconfont"></span>
    </div>
    <mt-datetime-picker 
    :class="{'hide-minute':hideMinute}"
    year-format="{value} 年"
    month-format="{value} 月"
    date-format="{value} 日"
    hour-format="{value} 时"
    minute-format="{value} 分"
    @cancel="$store.commit('mutateChangeZIndex',{overHidden: false, zIndex: 10})" style="position:absolute;" :startDate="hStart" :endDate="hEnd" ref="picker" :type="dateType" v-model="pickerValue" @confirm="choseTimeFunc">
    </mt-datetime-picker>
  </div>
</template>

<script>
import { DatetimePicker } from 'mint-ui'
import myClass from '@/assets/js/common'
export default {
  name: 'firstInputBox',
  
  data () {
    return {
      border_active: false, // 错误展示类
      pickerValue: new Date(),
      hideMinute: false
    }
  },
  props: {
    'h-value': {
      default: () => {
        return ''
      }
    },
    'h-placeholder': {
      default: () => {
        return ''
      }
    },
    'h-type': {
      default: () => {
        return 'text'
      }
    },
    'h-date': {
      default: 'datetime'
    },
    // 0 不校验 1校验下是否为空 2校验下是否为数字
    'h-kind': {
      default: '0',
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['0', '1', '2'].indexOf(value) !== -1
      }
    },
    // 用来校验 当变化的时候 一般提交的时候变化
    'h-check': {
      default: 0
    },
    'h-start': {
      default: () => {
        return new Date(myClass.computedDateTime(new Date(), 'YYYY/MM/DD hh:mm:ss', -360))
      }
    },
    'h-end': {
      default: () => {
        return new Date(myClass.computedDateTime(new Date(), 'YYYY/MM/DD hh:mm:ss', 180))
      }
    },
    'border-length': {
      default: () => {
        return true
      }
    }
  }, //['value', 'h-placeholder', 'h-type'],
  components: {
    'mt-datetime-picker': DatetimePicker
  },

  computed: {
    dateType () {
      switch (this.hDate) {
        case 'datehour':
          this.hideMinute = true
          return 'datetime'
        return
        default:
        return this.hDate
      }
    },
    dateTimeValue () {
      switch (this.hDate) {
        case 'datetime':
          return this.hValue === '' ? '' : myClass.computedDateTime(new Date(this.hValue), 'YYYY年MM月DD日 hh点mm分ss秒')
        case 'date':
          return this.hValue === '' ? '' : myClass.computedDateTime(new Date(this.hValue), 'YYYY年MM月DD日')
        case 'datehour':
          return this.hValue === '' ? '' : myClass.computedDateTime(new Date(this.hValue), 'YYYY年MM月DD日 hh点')
      }
    }
  },
  watch: {
    hCheck () {
      if (this.hKind === '1' && this.$refs['cInput'].value.trim() !== '') {
        this.border_active = false
      } else if (this.hKind === '1') {
        this.border_active = true
      }
    },
    hValue (afterDate) {
      if (this.hKind === '1' && afterDate !== '') {
        this.border_active = false
      } else if (this.hKind === '1') {
        this.border_active = true
      }
    }
  },
  methods: {
    // 选择时间
    choseTimeFunc (time) {
      this.$store.commit('mutateChangeZIndex',{overHidden: false, zIndex: 10})
      let dateTime = myClass.computedDateTime(time)
      let val = ''
      switch (this.hDate) {
        case 'datetime':
        dateTime = dateTime
        val = myClass.computedDateTime(time, 'YYYY年MM月DD日 hh点mm分ss秒')
        break
        case 'date':
        dateTime = dateTime.split(' ')[0]
        val = myClass.computedDateTime(time, 'YYYY年MM月DD日')
        break
        case 'time':
        dateTime = dateTime.split(' ')[1]
        val = myClass.computedDateTime(time, 'hh点mm分')
        break
        case 'datehour':
        dateTime = dateTime.split(':')[0] + ':00:00'
        val = myClass.computedDateTime(time, 'YYYY年MM月DD日 hh点')
        break
      }
      this.$refs['cInput'].value = val
      this.$emit('changeInput', dateTime)
        this.border_active = false
    },
    // 打开时间picker
    openPicker () {
      this.$store.commit('mutateChangeZIndex',{overHidden: true ,zIndex: -1})
      this.$refs.picker.open()
    }
  },

  mounted () {
  }
}
</script>
<style lang="stylus">
$rem = 2.5
.time-box
  .hide-minute
    .picker-items
      .picker-slot.picker-slot-center:nth-child(5)
        display none
  .v-modal
    position absolute
.fourth-input-box
  position relative
  display flex
  justify-content flex-start
  align-items center 
  padding  0.5rem * $rem  0.18rem * $rem 0.5rem * $rem 0.22rem * $rem
  .financial-reimbursement-jiantou8
    display inline-block
    color #cacaca
    transform rotate(-90deg)
    padding-top 0.1rem * $rem
  &:after
    content ''
    position absolute
    bottom 0
    left 0
    right 0
    margin 0 auto
    width calc(100% - 1rem)
    height 0.02rem * $rem
    background-color #dddddd
  &.border-width100:after
    width 100%
  &.border-active:after
    background-color #ff0000
  .c-input
    width auto
    height 0.6rem * $rem 
    font-size 0.27rem * $rem
    line-height 0.6rem * $rem
    background-color transparent
    border none
    outline none
    color #333
    flex 1 1 auto
    text-align right
    padding-left 0
    &.c-opacity:disabled
      color #b3afaf
      -webkit-text-fill-color #b3afaf
  .c-name
    color #1a1e24
    font-weight bold
    padding-right 0.1rem * $rem
    font-size 0.3rem * $rem
    .must-entry
      position absolute
      display flex
      align-items center
      height 100%
      top 0
      left 0.06rem * $rem
      font-size 0.3rem * $rem
      color #ff6b6b
      font-style normal
      line-height normal
</style>
